<template>
  <div>
    <codemirror
      ref="code_mirror"
      v-model="code"
      :options="options"
      @changes="changes"
      class="code"
    >
    </codemirror>
  </div>
</template>

<script>
// require component
import { codemirror } from "vue-codemirror";

import "codemirror/lib/codemirror.css";
import "codemirror/mode/clike/clike.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/css/css.js";
import "codemirror/mode/xml/xml.js";
import "codemirror/mode/python/python.js";

import "codemirror/addon/selection/active-line"; //光标行背景高亮，配置里面也需要styleActiveLine设置为true
import "codemirror/keymap/sublime"; //sublime编辑器效果
import "codemirror/mode/css/css";
import "codemirror/theme/monokai.css"; //编辑器主题样式，配置里面theme需要设置monokai

export default {
  data() {
    return {
      code: "", // 编辑器绑定的值
      // 默认配置
      options: {
        tabSize: 2, // 缩进格式
        theme: "rubyblue", // 主题，对应主题库 JS 需要提前引入
        lineNumbers: true, // 显示行号
        line: true,
        styleActiveLine: true, // 高亮选中行
        hintOptions: {
          completeSingle: true, // 当匹配只有一项的时候是否自动补全
        },
      },
      modes: [
        {
          value: "x-csrc",
          label: "C",
        },
        {
          value: "x-c++src",
          label: "C++",
        },
        {
          value: "x-java",
          label: "Java",
        },
        {
          value: "css",
          label: "CSS",
        },
        {
          value: "javascript",
          label: "Javascript",
        },
        {
          value: "html",
          label: "XML/HTML",
        },
        {
          value: "x-python",
          label: "Python",
        },
      ],
    };
  },
  components: {
    codemirror,
  },
};
</script>

<style>
</style>
